<!DOCTYPE html>
<html>
<head>
  <title>VDE Prototype</title>

  <link rel="stylesheet" type="text/css" href="css/styles.css" />
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.8.23/themes/base/jquery-ui.css" type="text/css" />

  <script src="./jquery-1.8.2.js"></script>
  <script src="./jquery-ui-1.9.1.custom.js"></script>
	<script src="./d3.v2.js" type="text/javascript"></script>
  <script src="./interaction.js"></script>
  
  <link href='http://fonts.googleapis.com/css?family=Amaranth:700' rel='stylesheet' type='text/css'>
	
  
  
  
</head>


<body>
	<div id="leftSide">
		<div id="toolbar">
			<div class="header" id="header1">MARKS</div>
			<div id="draggable_rect" class="mark blueBox"> <svg id="rectdrag" width="50" height="50"></svg> </div>
			<div id="draggable_arc" class="mark blueBox"> <svg id="arcdrag" width="50" height="50"></svg> </div>
			<div id="draggable_scatter" class="mark blueBox"> <svg id="scatterdrag" width="50" height="50"></svg> </div>	
			<div id="draggable_axis" class="axismark blueBox"> <svg id="axisdrag" width="50" height="50"></svg> </div>	
			<div id="draggable_text" class="mark blueBox textmark">T</div>
		</div>
		
		<div id="sidebar">
	    <div class="header" id="header2">DATA COLUMNS</div>
	    <div id="data">
	      <ul></ul>
	    </div>
		    <!--<div id="properties"></div>-->
		</div>

		<div id="propertyEditor">
			<!--<p>Update Bar Widths:</p>
			<input type="range" name="barWidthSlider" id="barWidthSlider" min="10" max="100" step="1" value="100" style="width: 242px"/>-->
			<div class="header" id="header3" style="margin-bottom:10px">PROPERTY EDITOR</div>
			
			<table id="propertyEditorTable">
				<tr id="barFillColorRow">
					<td class="propertyEditorHeader">Fill Color:</td>
					<td class="propertyEditorWidget">
						<input class="colorInput" type="color" name="barFillColor" id="barFillColor"/>
					</td>
				</tr>
				
				<tr id="barStrokeColorRow">
					<td class="propertyEditorHeader">Background Color:</td>
					<td class="propertyEditorWidget">
						<input class="colorInput" type="color" name="barStrokeColor" id="barStrokeColor"/>
					</td>
				</tr>
				
				<tr id="axesColorRow">
					<td class="propertyEditorHeader">Axes Font Color:</td>
					<td class="propertyEditorWidget">
						<input class="colorInput" type="color" name="axesColor" id="axesColor"/>
					</td>
				</tr>
				
				<tr id="updateFontSizeRow">
					<td class="propertyEditorHeader">Text Size:</td>
					<td class="propertyEditorWidget">
						<div class="pixelInput"><input type="text" name="updateFontSize" id="updateFontSize"/> px</div>
					</td>
				</tr>
				
				<tr id="updateTextFontRow">
					<td class="propertyEditorHeader">Text Font:</td>
					<td class="propertyEditorWidget">
						<div class="textInput"><input type="text" name="updateTextFont" id="updateTextFont" value="Verdana"/>
						<span id="fontFound"></span></div>
					</td>
				</tr>
				
				<tr id="styleTextRow">
					<td class="propertyEditorHeader">Bold/Italics/ULine:</td>
					<td class="propertyEditorWidget">
						<div class="buttonInput">
							<button type="button" name="boldButton" id="boldButton" style='font-weight:bold'>B</button>
							<button type="button" name="italButton" id="italButton" style='font-style:italic'>I</button>
							<button type="button" name="ulneButton" id="ulneButton" style='text-decoration:underline'>U</button>
						</div>
					</td>
				</tr>
				
				<tr id="updateXPosRow">
					<td class="propertyEditorHeader">X Position:</td>
					<td class="propertyEditorWidget">
						<div class="pixelInput"><input type="text" name="updateXPos" id="updateXPos"/> px</div>
					</td>
				</tr>
				
				<tr id="updateYPosRow">
					<td class="propertyEditorHeader">Y Position:</td>
					<td class="propertyEditorWidget">
						<div class="pixelInput"><input type="text" name="updateYPos" id="updateYPos"/> px</div>
					</td>
				</tr>
				
				<tr id="updateOpacityRow">
					<td class="propertyEditorHeader">Opacity:</td>
					<td class="propertyEditorWidget">
						<div class="sliderInput"><input type="range" name="updateOpacity" id="updateOpacity" min="0.01" max="1.0" step="0.01" value="1.0"/></div>
					</td>
				</tr>
				
				<tr id="updateDotSizeRow">
					<td class="propertyEditorHeader">Dot Size:</td>
					<td class="propertyEditorWidget">
						<div class="sliderInput"><input type="range" name="updateDotSize" id="updateDotSize" min="16" max="2080" step="16" value="64"/></div>
					</td>
				</tr>
				
				<tr id="innerRadiusRow">
					<td class="propertyEditorHeader">Inner Radius:</td>
					<td class="propertyEditorWidget">
						<div class="sliderInput"><input type="range" name="innerRadius" id="innerRadius" min="0" max="100" step="1" value="0"/></div>
					</td>
				</tr>
				
				<tr>
					<td class="propertyEditorHeader">Toggle Guidelines:</td>
					<td class="propertyEditorWidget">
						<div><input style='width:97px' type="submit" name="toggleGuidelines" id="toggleGuidelines" value="TURN ON"/></div>
					</td>
				</tr>
				
			</table>
			
		</div>
	</div>
	
	
	
	<div id="rightSide">			
		<div id="region">
			<svg id="vis" width="2000" height="3000" xmlns="http://www.w3.org/2000/svg">
			 <!--   <rect x="200" y="200" width="50" height="100" fill="steelblue" stroke="#ccc" stroke-width="2"></rect> -->
			 
				<rect class='guideline vguideline' x="0" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="100" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="200" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="300" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="400" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="500" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="600" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="700" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="800" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="900" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="1000" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="1100" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="1200" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="1300" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="1400" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="1500" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="1600" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="1700" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="1800" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="1900" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				<rect class='guideline vguideline' x="2000" y='0' width='2' height='3000' fill='#e0e0e0'></rect>
				
				<rect class='guideline hguideline' x="0" y='0' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='100' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='200' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='300' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='400' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='500' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='600' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='700' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='800' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='900' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='1000' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='1100' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='1200' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='1300' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='1400' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='1500' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='1600' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='1700' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='1800' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='1900' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='2000' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='2100' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='2200' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='2300' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='2400' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='2500' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='2600' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='2700' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='2800' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='2900' width='2000' height='2' fill='#e0e0e0'></rect>
				<rect class='guideline hguideline' x="0" y='3000' width='2000' height='2' fill='#e0e0e0'></rect>
			</svg>
		</div>
	</div>



</body>
</html>
